<template>
  <div class="workArrange-setting">
    <el-card style="margin:12px">
      <el-button type="primary" style="margin-bottom:15px" @click="handleDialog">添加工作模式</el-button>
      <el-table v-loading="loading" :data="patternsTable" stripe :header-cell-style="{background:'#f8faff',color:'#818693'}">
        <el-table-column prop="id" label="工作模式编号" />
        <el-table-column prop="name" label="工作模式" />
        <el-table-column prop="workPatternTypeDesc" label="类型" />
        <el-table-column prop="workDate" label="工作日期" />
        <el-table-column
          prop="workEndMinute1"
          label="工作时间"
          :formatter="(row)=>(row.workEndMinute1/60).toFixed(2)+'小时'"
        />
        <el-table-column label="操作">
          <template #default="{row}">
            <a href="javascript:void(0);" style="color:#419eff;" @click="edit(row.id)">编辑</a>
            <div class="line" />
            <a href="javascript:void(0);" style="color:#f56c6c;" @click="del(row.id)">删除</a>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增工作模式 -->
    <el-dialog :title="patterms.id?'编辑工作模式':'新增工作模式'" :visible="showSettings" @close="close">
      <el-tabs v-model="workPatternType" @tab-click="handleClick">
        <el-tab-pane v-if="weekDay" label="礼拜制" name="1" />
        <el-tab-pane v-if="continuous" label="连续制" name="2" />
      </el-tabs>
      <el-form label-width="120px">
        <el-form-item label="工作模式名称：">
          <el-input v-model="patterms.name" placeholder="请填写工作模式名称" />
        </el-form-item>
        <el-form-item v-if="workPatternType==='1'" label="连续工作天数：">
          <el-checkbox v-model="patterms.monday" true-label="1" false-label="2">周一</el-checkbox>
          <el-checkbox v-model="patterms.tuesday" true-label="1" false-label="2">周二</el-checkbox>
          <el-checkbox v-model="patterms.wednesday" true-label="1" false-label="2">周三</el-checkbox>
          <el-checkbox v-model="patterms.thursday" true-label="1" false-label="2">周四</el-checkbox>
          <el-checkbox v-model="patterms.friday" true-label="1" false-label="2">周五</el-checkbox>
          <el-checkbox v-model="patterms.saturday" true-label="1" false-label="2">周六</el-checkbox>
          <el-checkbox v-model="patterms.sunday" true-label="1" false-label="2">周日</el-checkbox>
        </el-form-item>
        <el-form-item v-else label="连续工作天数：" class="work-day">
          <span>上</span><el-input v-model="patterms.workDayNum" placeholder="请输入" />
          <span>休</span><el-input v-model="patterms.restDayNum" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="工作时间：">
          <el-time-picker
            v-model="workTime"
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            format="HH:mm"
            value-format="HH:mm"
            style="width:100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="submitSetting">确认</el-button>
          <el-button @click="close">取消</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { addWorkSetting, delWorkSetting, editWorkSetting, getWorkPatterns, getWorkPatternsDeatil } from '@/api/employee'
export default {
  data() {
    return {
      page: {
        page: 1,
        pageSize: 10
      },
      patternsTable: [],
      loading: false,
      showSettings: false,
      workTime: ['09:00', '18:00'],
      workPatternType: '1',
      patterms: {
        name: '',
        monday: '0',
        tuesday: '0',
        wednesday: '0',
        thursday: '0',
        friday: '0',
        saturday: '0',
        sunday: '0',
        workDayNum: '',
        restDayNum: ''
      },
      continuous: true,
      weekDay: true
    }
  },
  computed: {
    workStartMinute1() {
      return this.workTime[0].split(':')[0] * 60 + +this.workTime[0].split(':')[1]
    },
    workEndMinute1() {
      return this.workTime[1].split(':')[0] * 60 + +this.workTime[1].split(':')[1]
    }
  },
  created() {
    this.initWorkPatterns()
  },
  methods: {
    async initWorkPatterns() {
      this.loading = true
      try {
        const res = await getWorkPatterns(this.page)
        this.patternsTable = res.items
      } catch (error) {
        this.loading = false
      }
      this.loading = false
    },
    handleClick() {
      this.patterms = {
        name: '',
        monday: '0',
        tuesday: '0',
        wednesday: '0',
        thursday: '0',
        friday: '0',
        saturday: '0',
        sunday: '0',
        workDayNum: '',
        restDayNum: ''
      }
    },
    handleDialog() {
      this.showSettings = true
    },
    // 编辑
    async edit(id) {
      const res = await getWorkPatternsDeatil(id)
      this.patterms = res
      this.workPatternType = res.workPatternType.toString()
      this.workTime = [this.$dayjs(res.workStartMinute1).format('HH:mm'), this.$dayjs(res.workEndMinute1).format('HH:mm')]
      if (res.workPatternType === 1) {
        this.continuous = false
      } else {
        this.weekDay = false
      }
      this.showSettings = true
    },
    // 新增
    async submitSetting() {
      if (this.patterms.id) {
        this.patterms.workStartMinute1 = this.workStartMinute1
        this.patterms.workEndMinute1 = this.workEndMinute1
        await editWorkSetting(this.patterms)
        this.$message.success('更新成功')
      } else {
        await addWorkSetting({ ...this.patterms, workPatternType: this.workPatternType,
          workStartMinute1: this.workEndMinute1, workEndMinute1: this.workEndMinute1 })
        this.$message.success('新增成功')
      }

      this.initWorkPatterns()
      this.close()
    },
    // 删除
    async del(id) {
      await delWorkSetting(id)
      this.$message.success('删除成功')
      this.initWorkPatterns()
      this.close()
    },
    close() {
      this.showSettings = false
      this.weekDay = true
      this.continuous = true
      this.patterms = {
        name: '',
        monday: '0',
        tuesday: '0',
        wednesday: '0',
        thursday: '0',
        friday: '0',
        saturday: '0',
        sunday: '0',
        workDayNum: '',
        restDayNum: ''
      }
    }

  }
}
</script>

<style lang="scss" scoped>
 .el-tabs{
      ::v-deep .el-tabs__item{
        &.is-active{
          font-size: 16px;
          font-weight: 700;
          color: #20232a !important;
        }
      }
    }
.workArrange-setting{
   ::v-deep .el-dialog{
  width: 720px !important;
  .el-dialog__body{
    padding: 40px 60px 0;
    }
  }
  .work-day{
    ::v-deep .el-form-item__content{
      display: flex;
      .el-input{
        width: 110px;
        margin-right: 12px;
      }
      span{
        margin-right: 12px;
      }
    }
  }
}
</style>
